<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!-- <link rel="stylesheet" href="/docs/css/bootstrap.min.css" /> -->
  <!-- <link rel="stylesheet" href="/css/bootstrap-responsive.min.css" /> -->
  <link rel="stylesheet" href="/docs/css/bootstrap-flatly.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
  <link rel="stylesheet" href="/css/site.css" />
  <link rel="stylesheet" href="//ui-grid.info/release/ui-grid-unstable.min.css" />
</head>
<body>
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="nav navbar-header">
      <a href="/" class="navbar-brand">UI Grid</a>
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Learn
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="/docs/#/api">Docs</a>
            </li>
            <li>
              <a href="/docs/#/tutorial">Tutorial</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="navbar-header navbar-right">
      <p class="navbar-text hidden-phone">
        <iframe class="nav-ghbtn" src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ng-grid&type=watch&count=true"
              allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
        <iframe class="nav-ghbtn" src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ng-grid&type=fork&count=true"
              allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
      </p>
    </div>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <div class="description">
        <h1 class="text-center">Angular UI Grid</h1>
        <p class="lead text-center">A data grid for <strong>AngularJS</strong>, part of the <strong><a href="http://angular-ui.github.io/">AngularUI</a></strong> suite</p>
        <ul class="benefits text-left">
          <li>Native AngularJS implementation, no jQuery</li>
          <li>Performs well with large data sets; even <strong>10,000+</strong> rows</li>
          <li>Plugin architecture allows you to use only the features you need</li>
        </ul>
        <p class="btn-group2 text-center">
          <a class="btn btn-success btn-large" href="https://github.com/angular-ui/ng-grid" title="Code on Github">
            <i class="fa fa-github fa-fw"></i>
              Code on Github
          </a>
      
          <a class="btn btn-danger btn-large" href="https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release" title="Download <%= version %>">
            <i class="fa fa-download fa-fw"></i>
            <!-- Download <small>( <%= stable_version %> / <%= version %> )</small> --> <!-- TODO(c0bra): note: not showing stable version till 3.0.0 is released -->

            Download <small>( <%= version %> )</small>
          </a>
      
          <a class="btn btn-success btn-large" href="http://<%= site %>/docs/#/tutorial" title="Tutorial">
            <i class="fa fa-gears fa-fw"></i>
            Tutorial
          </a>
        </p>
      </div>
    </div>
  </div>
  
  <div class="container-fluid">   
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <div class="feature">
          <div class="feature-heading">
            <i class="fa fa-4x fa-wrench"></i>
          </div>
          <h4 class="feature-heading">Configurable</h4>
          <ul>
            <li>Customizeable templates</li>
            <li>Change look and feel with CSS and the <a href="/customizer">customizer</a></li>
            <li>Drop-in plugin system</li>
          </ul>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <div class="feature">
          <div class="feature-heading">
            <i class="fa fa-4x fa-gear"></i>
          </div>
          <h4 class="feature-heading">Standard Features</h4>
          <ul>
            <li>Sorting</li>
            <li>Filtering</li>
            <li>User interaction</li>
          </ul>
          <h4 class="feature-heading">Advanced Features</h4>
          <ul>
            <li>Virtualization</li>
            <li>Column pinning</li>
            <li>Grouping</li>
            <li>Edit in place</li>
            <li>Expandable rows</li>
            <li>Internationalisation</li>
          </ul>
        </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-lg-6">
        <div class="feature" ng-app="demo">
          <div class="feature-heading">
            <i class="fa fa-4x fa-certificate"></i>
          </div>
          <h4 class="feature-heading">Basic Example</h4>
          <div class="grid" ui-grid="gridOptionsSimple"></div>
          
          <h4 class="feature-heading">Complex Example</h4>
          <div class="grid" ui-grid="gridOptionsComplex" ui-grid-edit ui-grid-resize-columns></div>
        </div>
      </div>
    </div>
  </div>
 

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-animate.js"></script>
  <script src="//ui-grid.info/release/ui-grid-unstable.min.js"></script>
  <script>
    angular.module('demo', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'ui.grid.resizeColumns'])
    .run(function($rootScope, uiGridConstants) {
      $rootScope.gridOptionsSimple = {
        data: [
          {
              "name": "Ethel Price",
              "gender": "female",
              "company": "Enersol"
          },
          {
              "name": "Claudine Neal",
              "gender": "female",
              "company": "Sealoud"
          },
          {
              "name": "Beryl Rice",
              "gender": "female",
              "company": "Velity"
          },
          {
              "name": "Wilder Gonzales",
              "gender": "male",
              "company": "Geekko"
          },
          {
              "name": "Georgina Schultz",
              "gender": "female",
              "company": "Suretech"
          },
          {
              "name": "Carroll Buchanan",
              "gender": "male",
              "company": "Ecosys"
          },
          {
              "name": "Valarie Atkinson",
              "gender": "female",
              "company": "Hopeli"
          },
          {
              "name": "Schroeder Mathews",
              "gender": "male",
              "company": "Polarium"
          },
          {
              "name": "Lynda Mendoza",
              "gender": "female",
              "company": "Dogspa"
          },
          {
              "name": "Sarah Massey",
              "gender": "female",
              "company": "Bisba"
          },
          {
              "name": "Robles Boyle",
              "gender": "male",
              "company": "Comtract"
          },
          {
              "name": "Evans Hickman",
              "gender": "male",
              "company": "Parleynet"
          },
          {
              "name": "Dawson Barber",
              "gender": "male",
              "company": "Dymi"
          },
          {
              "name": "Bruce Strong",
              "gender": "male",
              "company": "Xyqag"
          },
          {
              "name": "Nellie Whitfield",
              "gender": "female",
              "company": "Exospace"
          },
          {
              "name": "Jackson Macias",
              "gender": "male",
              "company": "Aquamate"
          },
          {
              "name": "Pena Pena",
              "gender": "male",
              "company": "Quarx"
          },
          {
              "name": "Lelia Gates",
              "gender": "female",
              "company": "Proxsoft"
          },
          {
              "name": "Letitia Vasquez",
              "gender": "female",
              "company": "Slumberia"
          },
          {
              "name": "Trevino Moreno",
              "gender": "male",
              "company": "Conjurica"
          }
        ]
      };
      
      $rootScope.gridOptionsComplex = {
        enableFiltering: true,
        showFooter: true,
        columnDefs: [
          { name: 'name', aggregationType: uiGridConstants.aggregationTypes.count, width: 150 },
          { name: 'gender', filter: { term: 'male' }, width: 150, enableCellEdit: false, 
            cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
              if (grid.getCellValue(row,col) === 'male') {
                return 'blue';
              } else if (grid.getCellValue(row,col) === 'female') {
                return 'pink';
              }
            } 
          },
          { name: 'age', aggregationType: uiGridConstants.aggregationTypes.avg, width: 100 },
          { name: 'company', enableFiltering: false, width: 200 }
        ],
        data: [
          {
              "name": "Ethel Price",
              "gender": "female",
              "company": "Enersol",
              "age": 25
          },
          {
              "name": "Claudine Neal",
              "gender": "female",
              "company": "Sealoud",
              "age": 19
          },
          {
              "name": "Beryl Rice",
              "gender": "female",
              "company": "Velity",
              "age": 44
          },
          {
              "name": "Wilder Gonzales",
              "gender": "male",
              "company": "Geekko",
              "age": 26
          },
          {
              "name": "Georgina Schultz",
              "gender": "female",
              "company": "Suretech",
              "age": 53
          },
          {
              "name": "Carroll Buchanan",
              "gender": "male",
              "company": "Ecosys",
              "age": 64
          },
          {
              "name": "Valarie Atkinson",
              "gender": "female",
              "company": "Hopeli",
              "age": 35
          },
          {
              "name": "Schroeder Mathews",
              "gender": "male",
              "company": "Polarium",
              "age": 29
          },
          {
              "name": "Lynda Mendoza",
              "gender": "female",
              "company": "Dogspa",
              "age": 49
          },
          {
              "name": "Sarah Massey",
              "gender": "female",
              "company": "Bisba",
              "age": 40
          },
          {
              "name": "Robles Boyle",
              "gender": "male",
              "company": "Comtract",
              "age": 32
          },
          {
              "name": "Evans Hickman",
              "gender": "male",
              "company": "Parleynet",
              "age": 38
          },
          {
              "name": "Dawson Barber",
              "gender": "male",
              "company": "Dymi",
              "age": 21
          },
          {
              "name": "Bruce Strong",
              "gender": "male",
              "company": "Xyqag",
              "age": 61
          },
          {
              "name": "Nellie Whitfield",
              "gender": "female",
              "company": "Exospace",
              "age": 54
          },
          {
              "name": "Jackson Macias",
              "gender": "male",
              "company": "Aquamate",
              "age": 49
          },
          {
              "name": "Pena Pena",
              "gender": "male",
              "company": "Quarx",
              "age": 25
          },
          {
              "name": "Lelia Gates",
              "gender": "female",
              "company": "Proxsoft",
              "age": 54
          },
          {
              "name": "Alfred Oscar",
              "gender": "male",
              "company": "Transprop",
              "age": 34
          },
          {
              "name": "John Alfred",
              "gender": "male",
              "company": "Haymans",
              "age": 70
          },
          {
              "name": "Leonie Warren",
              "gender": "female",
              "company": "Hilltop",
              "age": 25
          },
          {
              "name": "Belinda Gosford",
              "gender": "female",
              "company": "Archison",
              "age": 42
          },
          {
              "name": "Tracey Misoni",
              "gender": "female",
              "company": "Verizona",
              "age": 34
          },
          {
              "name": "Trevino Moreno",
              "gender": "male",
              "company": "Conjurica",
              "age": 31
          }
        ]
      };      
    });
  </script>
</body>
</html>